<template>
    <div class="menu-wrapper">
        <el-menu
            :mode="menuMode"
            :default-active="currentKey"
            class="menu-box"
            :class="
                menuMode == 'vertical' ? 'vertical-menu' : 'horizontal-menu'
            "
        >
            <template v-for="item in menus">
                <el-menu-item
                    v-if="!item?.children.length"
                    :key="item.path"
                    :index="item.path"
                    @click="clickMenu(item)"
                >
                    <el-icon class="menu-icon">
                        <component
                            :is="filterIcon(item.meta?.icon)"
                        ></component>
                    </el-icon>
                    <span class="menu-label">{{ item.meta?.title }}</span>
                </el-menu-item>
                <el-sub-menu v-else :key="item.path" :index="item.path">
                    <template #title>
                        <el-icon class="menu-icon">
                            <component
                                :is="filterIcon(item.meta?.icon)"
                            ></component>
                        </el-icon>
                        <span class="menu-label">{{ item.meta?.title }}</span>
                    </template>
                    <el-menu-item
                        v-for="childItem in item.children"
                        :key="childItem.path"
                        :index="childItem.path"
                        @click="clickMenu(childItem)"
                    >
                        <span class="menu-label">{{
                            childItem.meta?.title
                        }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";
import { usePermissionStore, useLayoutStore } from "@/stores";
import { User, Message, Service } from "@element-plus/icons-vue";

const currentKey = ref("");
const menus = ref([]);
const permissionStoreData = usePermissionStore();
const layoutStoreData = useLayoutStore();
const { menuMode } = storeToRefs(layoutStoreData);
const router = useRouter();
const route = useRoute();
const iconList = [
    {
        type: "user",
        icon: User,
    },
    {
        type: "message",
        icon: Message,
    },
    {
        type: "service",
        icon: Service,
    },
];

onMounted(() => {
    currentKey.value = route.path;
    filterMenu();
});
const filterIcon = (icon: string) => {
    const target = iconList.find((i) => icon == i.type);
    if (target) {
        return target.icon;
    }
    return User;
};
// 初始化菜单
const filterMenu = () => {
    const { addRoutes } = storeToRefs(permissionStoreData);
    const list = addRoutes.value[0]?.children;
    menus.value = list;
};

// 监听路由变化
watch(
    () => route.path,
    (newVal) => {
        currentKey.value = newVal;
    }
);

const clickMenu = (item: RouteItem) => {
    currentKey.value = item.path;
    router.push({ path: item.path });
};
</script>

<style lang="scss" scoped>
.menu-wrapper {
    width: 100%;
    .menu-box {
        width: 100%;
        background-color: var(--main-body-bg-color);
        color: #fff;
        .el-menu-item {
            color: #fff;
        }
        .el-menu-item.is-active {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        .el-menu-item:hover {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
        .el-sub-menu .el-menu-item {
            padding-left: 50px;
        }
    }
    .horizontal-menu {
        border-bottom: none;
    }
}
</style>

<style lang="less">
.menu-wrapper {
    .menu-box {
        .el-sub-menu.is-active .el-sub-menu__title {
            color: var(--side-menu-bg-color);
            color: var(--side-menu-bg-color);
            &:hover {
                color: #fff;
            }
        }
        .el-menu {
            background-color: var(--main-body-bg-color);
        }
        .el-sub-menu .el-sub-menu__title {
            color: #fff;
        }
        .el-sub-menu__title:hover {
            color: #fff;
            background-color: var(--side-menu-bg-color);
        }
    }
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #fff;
    background-color: var(--side-menu-bg-color);
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
    color: #fff;
    background-color: var(--side-menu-bg-color);
}
.el-menu--horizontal > .el-menu-item.is-active {
    background-color: var(--main-body-bg-color) !important;
    color: var(--side-menu-bg-color) !important;
    border-bottom: 2px solid var(--side-menu-bg-color) !important;
}
.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
    border-bottom-color: var(--side-menu-bg-color);
}
</style>
